<template name="login">
    <view class="bg">
        <view class="avatar" :class="{changeavatar:isChangeAvatar}">
            <image src="/static/login/welcome.png" mode="widthFix"></image>
        </view>
        <view class="contentBox" :class="{changebox:isChangeBox}">
            <view class="nav" :class="{changeheight:isChangeHeight}">
                <text class="sign" @click="gosign" :class="{chooseState:isShooseState1}">登录</text>
                <text class="register" @click="goregi" :class="{chooseState:isShooseState2}">注册</text>
            </view>
            <view class="content" v-show="islog" @changePwd="handle($event)">
                <!-- 显示用户头像 -->
                <view class="account_ava" v-show="isShowAva">
                    <image :src="currentAccountHeader" mode="widthFix"></image>
                </view>
                <!-- 账号信息下拉框 -->
                <view class="icon_down_box" v-show="isShowDown">
                    <image class="icon_down" src="/static/login/select.png" mode="widthFix" @click="showStorageAccount"></image>
                    <!-- 存储账号信息区域 -->
                    <view class="storage_account_info_box" v-if="isShowStorageAccount">
                        <view class="single_account" v-for="(item,index) in accountInfo" :key="index">
                            <view class="header_img" @click="chooseAccount(index)">
                                <image :src="item.headerImg" mode="widthFix"></image>
                            </view>
                            <view class="account" @click="chooseAccount(index)">{{item.userPhone}}</view>
                            <image class="del_icon" src="/static/login/input_delete.png" mode="widthFix" @click="delStorageAccount(index)"></image>
                        </view>
                    </view>
                    <!-- 输入时，匹配账号信息区域 -->
                    <view class="storage_account_info_box" v-if="isShowMarchAccount">
                        <view class="single_account" v-for="(item,index) in hasAccounts" :key="index">
                            <view class="header_img" @click="chooseAccount(index)">
                                <image :src="item.headerImg" mode="widthFix"></image>
                            </view>

                            <view class="account" @click="chooseMarchAccount(index)">{{item.userPhone}}</view>
                            <image class="del_icon" src="/static/login/input_delete.png" mode="widthFix" @click="delMarchAccount(index)"></image>
                        </view>
                    </view>
                </view>
                <!-- 清空输入框内容 -->
                <view class="delete" v-show="isDel" @click="delData">
                    <image src="/static/login/input_delete.png" mode="widthFix"></image>
                </view>
                <!-- 设置密码可见 -->
                <view class="show_pwd" @click="isShowPwd">
                    <image src="/static/login/pwd_show.png" mode="widthFix"></image>
                </view>
                <input type="text" class="username" placeholder="手机号码 / 昵称" maxlength=11 v-model="userPhone" @input="isShowDel"
                    @change="passUsername" />
                <input :type="pwdType" class="password" placeholder="输入密码" v-model="userPassword" @change="passPassword"
                    maxlength=10 />
                <button type="button" @click="islogin" :style="{backgroundImage:'url('+signImgUrl+')'}">登录</button>
            </view>
            <view v-show="isreg">
                <register :data="{tel,pwd,msg,flag}"></register>
            </view>

            <text class="forgetPsd" @click="changePwd">忘记密码</text>
        </view>

    </view>
</template>

<script>
    import register from './register.vue';

    export default {
        components: {
            register
        },
        data() {
            return {
                //切换修改密码
                flag: true,
                //登录按钮图片路径
                signImgUrl: '/static/login/sign_gray.png',
                // 密码显示类型
                pwdType: "password",
                //显示登录页面
                islog: true,
                //显示注册页面
                isreg: false,
                //显示个人头像
                isShowAva: false,
                //显示删除图标
                isDel: false,
                //显示下拉图标
                isShowDown: false,
                //用户名
                userPhone: "",
                //密码
                userPassword: "",
                tel: "",
                pwd: "",
                msg: "",
                //改变顶部图片框定位
                isChangeAvatar: false,
                //改变内容框定位
                isChangeBox: false,
                //改变内容框class
                isChangeHeight: false,
                //登录注册导航按钮样式
                isShooseState1: true,
                isShooseState2: false,
                //存储账号
                accountInfo: [],
                accountInfo123: [],
                //是否显示存储账号
                isShowStorageAccount: false,
                //输入过程中匹配的存储账号
                hasAccounts: [],
                //是否显示匹配账号
                isShowMarchAccount: false,
                //选中用户的头像
                currentAccountHeader: ""
            };
        },
        methods: {
            //切换修改密码
            changePwd() {
                this.flag = !this.flag
                this.goregi()
            },
            //登录按钮触发
            gosign() {
                //切换登录注册
                this.islog = true;
                this.isreg = false;
                //改变显示样式
                this.isChangeAvatar = false;
                this.isChangeBox = false;
                this.isChangeHeight = false;
                //改变登录注册导航按钮样式
                this.isShooseState1 = true;
                this.isShooseState2 = false;
            },
            //注册按钮触发
            goregi() {
                //切换登录注册
                this.islog = false;
                this.isreg = true;
                //改变显示样式
                this.isChangeAvatar = true;
                this.isChangeBox = true;
                this.isChangeHeight = true;
                //改变登录注册导航按钮样式
                this.isShooseState1 = false;
                this.isShooseState2 = true;
            },
            //---------------------------------------------------------------------
            // 输入框有内容,显示清空内容图标
            isShowDel() {
                if (this.userPhone.length > 0) {
                    this.isDel = true,
                        this.isShowAva = true,
                        this.isShowDown = true
                } else if (this.userPhone.length <= 0) {
                    this.isDel = false,
                        this.isShowAva = false,
                        this.isShowDown = false
                };
                //输入账号时,查询存储中是否存在
                let hasAccount = [];
                for (let k = 0; k < this.accountInfo.length; k++) {
                    let res = this.accountInfo[k].userPhone.search(this.userPhone)
                    console.log(res)
                    if (res !== -1) {
                        hasAccount.push(this.accountInfo[k])
                        this.isShowMarchAccount = true
                    } else {
                        hasAccount.splice(k, 1)
                        this.currentAccountHeader = ""
                    }
                }
                // 赋值给data中的存储账号数组
                this.hasAccounts = hasAccount
                //输入框输入时，关闭存储账号信息区域
                this.isShowStorageAccount = false

            },
            // 清空内容
            delData() {
                this.userPhone = "";
                this.userPassword = "";
                this.isDel = false;
                this.isShowAva = false;
                this.isShowDown = false;
            },
            //控制显示密码
            isShowPwd() {
                if (this.pwdType === "text") {
                    this.pwdType = "password"
                } else if (this.pwdType === "password") {
                    this.pwdType = "text"
                }
            },
            //验证userPhone框
            passUsername() {
                let reg = /^.{2,11}$/;
                let passName = reg.test(this.userPhone);
                return passName
            },
            //验证password框
            passPassword() {
                let reg = /^[\w\.]{6,10}$/;
                let passPwd = reg.test(this.userPassword);
                return passPwd
            },
            // 表单验证,发送请求
            islogin() {
                const name = this.passUsername();
                const pwd = this.passPassword();
                if (name && pwd) {
                    //登录请求
                    this.$request('/comic-time/login', {
                            "userPhone": this.userPhone,
                            "userPassword": this.userPassword
                        },
                        'POST').then(res => {
                        if (res.msg === "请求成功") {
                            //运行存储账号函数
                            this.storageUserPhone(res.data.userHeaderImage)
                        }
                        uni.setStorage({
                            key: 'accountInfo',
                            data: this.accountInfo,
                            success: function(res) {
 
                            }
                        });
                        if (res.data === null) {
                            uni.showToast({
                                title: res.msg,
                                position: "center",
                                icon: "none",
                                duration: 2000,
                                mask: true
                            });
                            return
                        }
                        //存储头像
                        uni.setStorage({
                            key: 'headerImg',
                            data: res.data.userHeaderImage,
                            success: function(res) {

                            }
                        });

                        //存储token
                        uni.setStorage({
                            key: 'token',
                            data: res.data.ecode,
                            success: function() {
                                uni.switchTab({
                                    url: '/pages/index/index'
                                });
                            }
                        });

                    });
                } else {
                    uni.showToast({
                        title: "用户名或密码格式错误",
                        position: "center",
                        icon: "none",
                        duration: 2000,
                        mask: true
                    });
                }
            },
            //存储账号
            storageUserPhone(img) {
                let accountObj = {
                    headerImg: img,
                    userPhone: this.userPhone
                }
                if(this.hasAccounts.length==0){
                    this.accountInfo.push(accountObj)
                }else{
                    if(!this.userPhone===this.hasAccounts[0].userPhone){
                          this.accountInfo.push(accountObj)
                    }
                }
            },
            //显示存储账号信息
            showStorageAccount() {
                this.isShowStorageAccount = !this.isShowStorageAccount
                //关闭匹配账号信息区域
                this.isShowMarchAccount = false
            },
            //删除存储账号
            delStorageAccount(index) {
                this.accountInfo.splice(index, 1)
                // 删除后重新存储
                uni.setStorage({
                    key: 'accountInfo',
                    data: this.accountInfo
                });
                if (this.accountInfo.length === 0) {
                    //没有数据，则不显示
                    this.isShowStorageAccount = false
                }
            },
            //删除匹配账号
            delMarchAccount(index) {
                this.hasAccounts.splice(index, 1)
                if (this.accountInfo.length === 0) {
                    //没有数据，则不显示
                    this.isShowStorageAccount = false
                }
            },
            //选择存储账号，映射到输入框
            chooseAccount(index) {
                //映射账号
                this.userPhone = this.accountInfo[index].userPhone
                //映射头像
                this.currentAccountHeader = this.accountInfo[index].headerImg
                this.isShowStorageAccount = false
                this.isShowMarchAccount = false
            },
            //选择匹配账号，映射到输入框
            chooseMarchAccount(index) {
                //映射账号
                this.userPhone = this.hasAccounts[index].userPhone
                //映射头像
                this.currentAccountHeader = this.hasAccounts[index].headerImg
                this.isShowStorageAccount = false
                this.isShowMarchAccount = false

            },


            //--------------------------------------------------------------------------------
            //setstorage储存账号
            setaccountInfo() {
                uni.setStorage({
                    key: 'accountInfo',
                    data: this.accountInfo,
                    success: function(res) {
                    }
                });
            },
            // 从setstorage中获取储存账号
            getaccountInfo() {
                let newAccountInfo = uni.getStorageSync('accountInfo');
                this.accountInfo = newAccountInfo
                console.log(newAccountInfo)
            }
        },

        mounted() {
            this.setaccountInfo()
        },
        onShow() {
            this.getaccountInfo()
        },
        beforeUpdate() {
            if (this.passUsername() && this.passPassword()) {
                this.signImgUrl = '/static/login/sign_red.png'
            } else {
                this.signImgUrl = '/static/login/sign_gray.png'
            };
        }


    }
</script>

<style lang="scss" scoped>
    // 登录注册导航按钮样式
    .chooseState {
        color: #ff6262;
        padding-bottom: 40rpx;
        border-bottom: solid 4rpx #ff6262;
        font-size: 40rpx;
    }

    .bg {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, #FF6262, #FF7A62, #FF8E62);
        position: relative;
    }

    .avatar {
        width: 262rpx;
        height: 238rpx;
        position: absolute;
        top: 187rpx;
        left: 244rpx;

        image {
            width: 262rpx;
            z-index: 10
        }
    }

    .contentBox {
        width: 670rpx;
        // height: 801rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        position: absolute;
        top: 417rpx;
        left: 40rpx;
    }

    .nav {
        width: 670rpx;
        height: 213rpx;
        // background-color: #eee;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 20rpx;
    }

    .sign,
    .register {
        // width: 77rpx;
        height: 34rpx;
        font-family: PingFangSC-Regular;
        font-size: 36rpx;
        line-height: 34rpx;
        box-sizing: border-box;
    }

    .content {
        text-align: center;
        position: relative;

        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        text-align: center !important;

        .account_ava {
            width: 80rpx;
            height: 80rpx;
            // background-color: #e9e9e9;
            border-radius: 50%;
            position: absolute;
            top: 12rpx;
            left: 70rpx;
            overflow: hidden;
            background-size: cover;

            image {
                width: 80rpx;
                height: 80rpx;
            }
        }

        .icon_down_box {
            width: 31rpx;
            height: 20rpx;
            position: absolute;
            top: 30rpx;
            right: 72rpx;

            .icon_down {
                width: 31rpx;
            }

            .storage_account_info_box {
                width: 400rpx;
                position: absolute;
                background-color: #e5e5e5;
                top: 80rpx;
                right: 72rpx;
                z-index: 5;

                .single_account {
                    width: 400rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    border: 1rpx solid #ffffff;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .header_img {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 40rpx;
                        box-sizing: boeder-box;
                        background-color: #eee;
                        overflow: hidden;

                        image {
                            width: 80rpx;
                            height: 80rpx;
                        }
                    }

                    .account {
                        width: 250rpx;
                        height: 80rpx;
                        text-align: center;
                        line-height: 80rpx;
                    }

                    .del_icon {
                        width: 25rpx;
                        height: 25rpx;

                    }
                }
            }
        }

        .delete {
            width: 25rpx;
            height: 25rpx;
            position: absolute;
            top: 29rpx;
            right: 120rpx;

            image {
                width: 25rpx;
            }
        }

        .show_pwd {
            width: 31rpx;
            height: 20rpx;
            position: absolute;
            top: 170rpx;
            right: 72rpx;

            image {
                width: 31rpx;
            }
        }

        .username,
        .password {
            width: 590rpx;
            height: 104rpx;
            border-radius: 52rpx;
            border: solid 2rpx #dddddd;
            margin-bottom: 40rpx;
            box-sizing: border-box;
            padding: 0 120rpx;
            font-size: 36rpx;
            text-align: center;
            // border:none;
            outline: medium;
            margin-left: 40rpx;
        }
    }



    .username {
        margin-left: 40rpx;
    }

    .password {
        padding: 0 80rpx !important;
    }

    button {
        width: 590rpx;
        height: 104rpx;
        border-radius: 52rpx;
        border: solid 2rpx #dddddd;
        margin-top: 70rpx;
        margin-bottom: 60rpx;
        background-image: url("../../../static/login/sign_gray.png");
        background-size: cover;
        font-family: PingFangSC-Medium;
        font-size: 30rpx;
        line-height: 104rpx;
        color: #ffffff;
    }

    .forgetPsd {
        display: block;
        width: 100%;
        text-align: center;
        height: 26rpx;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        line-height: 33rpx;
        color: #333333;
        margin-bottom: 80rpx;
    }

    .changeavatar {
        position: absolute !important;
        top: 86rpx;
        left: 251rpx;
    }

    .changebox {
        position: absolute !important;
        top: 314rpx;
        left: 40rpx;
    }

    .changeheight {
        height: 171rpx;
    }
</style>
